<template>
  <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
    <el-form-item label="旧密码" prop="oldPassword" v-if="buttons.text=='短信验证'&&pwdSta">
      <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
    </el-form-item>
    <!-- <el-form-item label="手机号" prop="phone" v-if="buttons.text=='旧密码'" maxlength='11'>
      <el-input v-model="user.phone" placeholder="请输入手机号" type="text" />
    </el-form-item> -->
    <el-form-item label="新密码" prop="newPassword">
      <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password />
    </el-form-item>
    <el-form-item label="验证码" prop="code" v-if="buttons.text=='旧密码'||pwdSta==false">
      <el-input v-model="user.code" placeholder="请输入验证码" type="text" maxlength='6'>
        <template #append>
          <el-button type="primary" class="verifCode" @click="verifCodeClick"
            :disabled='disabled'>{{ button.text }}</el-button>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button :type="buttons.type" link @click="switchover"
        v-if="pwdSta">{{ buttons.text }}</el-button>
      <el-button type="danger" @click="close">关闭</el-button>
      <el-button type="primary" @click="submit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { updateUserPwd, eidtVcode } from "@/api/system/user";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const user = reactive({
  oldPassword: undefined,
  newPassword: undefined,
  confirmPassword: undefined,
  phone: undefined,
  code: undefined,
});
const pwdSta = ref(true);

const { proxy } = getCurrentInstance();
const buttons = ref({ type: "primary", text: "短信验证" });
function switchover() {
  if (buttons.value.text == "短信验证") {
    buttons.value.text = "旧密码";
  } else {
    buttons.value.text = "短信验证";
  }
}
if (userStore.userDta.pwd == 0) {
  pwdSta.value = false;
  buttons.value.text = "短信验证";
}
const button = ref({
  text: "获取验证码",
});
const currentTime = ref(60);
const disabled = ref(false);
const interval = ref("");
// 获取手机号验证
function verifCodeClick() {
  eidtVcode({ phone: userStore.userDta.phone }).then((res) => {
    proxy.$modal.msgSuccess("发送成功");
    let currentTime2 = currentTime.value;
    disabled.value = true;
    interval.value = setInterval(() => {
      currentTime2--;
      button.value.text = currentTime2 + "秒";
      if (currentTime2 <= 0) {
        clearInterval(interval.value);
        button.value.text = "重新发送";
        currentTime.value = 60;
        disabled.value = false;
      }
    }, 1000);
  });
}

const equalToPassword = (rule, value, callback) => {
  if (user.newPassword !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};
const phoneVerify = (rule, value, callback) => {
  if (!/^1[3456789]\d{9}$/.test(value)) {
    callback(new Error("手机号不符合规范"));
  } else {
    callback();
  }
};
const rules = ref({
  phone: [
    { required: true, message: "手机号不能为空", trigger: "blur" },
    { required: true, validator: phoneVerify, trigger: "blur" },
  ],
  oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
  newPassword: [
    { required: true, message: "新密码不能为空", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "确认密码不能为空", trigger: "blur" },
    { required: true, validator: equalToPassword, trigger: "blur" },
  ],
  code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
});

/** 提交按钮 */
function submit() {
  proxy.$refs.pwdRef.validate((valid) => {
    if (valid) {
      let dataUser = {
        // userPhone: user.phone,
        // userPassword: user.newPassword,
        // checkCode: user.code,
      };
      if (userStore.userDta.pwd == 0) {
        dataUser.status = 0;
        dataUser.phone = userStore.userDta.phone;
        dataUser.pwd = user.newPassword;
        dataUser.checkCode = user.code;
      } else {
        dataUser.status = 1;
        dataUser.phone = userStore.userDta.phone;
        dataUser.pwd = user.newPassword;
        dataUser.oldPwd = user.oldPassword;
      }
      updateUserPwd(dataUser).then((response) => {
        proxy.resetForm("pwdRef");
        proxy.$modal.msgSuccess("修改成功");

        useUserStore()
          .getInfo()
          .then(() => {})
          .catch((err) => {});
      });
    }
  });
}
/** 关闭按钮 */
function close() {
  proxy.$tab.closePage();
}
</script>
<style lang="scss" scoped>
.verifCode {
  color: cornflowerblue !important;
}
</style>
